<template>
  <div class="con">
    <el-container>
      <el-container>
        <el-main style="padding:0;">
          <!-- 放置内容区 -->
          <div class="contbox6_10">
            <p class="titlelist6_10">
              账户管理
              <span style="color: #999;">&nbsp;&nbsp;/&nbsp;&nbsp;</span
              >流水明细
            </p>
            <div class="content">
            <div class="sousuojg6_10" style="overflow: hidden">
              <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="归属机构">
                  <el-input
                  readonly
                    placeholder="请输入归属机构"
                    @focus="selectInstitution"
                    v-model="officeName"
                  ></el-input>
                </el-form-item>
                <el-form-item label="机构类型">
                  <el-select
                    v-model="listQuery.officeType"
                    placeholder="请选择机构类型"
                    class="filter-item"
                  >
                    <el-option label="全部" value></el-option>
                    <el-option label="OEM" value="0" v-if="jurisdiction!=0"></el-option>
                    <el-option label="普通代理" value="1"></el-option>
                    <el-option label="渠道机构" value="3" v-if="jurisdiction!=0"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="归属OEM">
                  <el-input
                    placeholder="请输入归属OEM"
                    v-model="listQuery.oEMName"
                  ></el-input>
                </el-form-item>
                <el-form-item label="机构ID">
                  <el-input
                    placeholder="请输入机构ID"
                    v-model="listQuery.orgUid"
                  ></el-input>
                </el-form-item>
                <el-form-item label="机构名称">
                  <el-input
                    placeholder="请输入机构名称"
                    v-model="listQuery.officeName"
                  ></el-input>
                </el-form-item>
                <el-form-item label="操作类型">
                  <el-select
                    v-model="listQuery.operType"
                    placeholder="请选择操作类型"
                    class="filter-item"
                  >
                    <el-option
                      v-for="item in operType"
                      :key="item.id"
                      :label="item.label"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item style="width:600px" label="订单日期">
                  <el-date-picker
                    type="date"
                    style="float:left"
                    value-format="yyyy-MM-dd"
                    placeholder="开始日期"
                    v-model="listQuery.startDate"
                  ></el-date-picker>
                  <div class="times" style="float:left">-</div>
                  <el-date-picker
                    type="date"
                    style="float:left"
                    value-format="yyyy-MM-dd"
                    placeholder="结束日期"
                    v-model="listQuery.endDate"
                  ></el-date-picker>
                </el-form-item>
              </el-form>
            </div>
            <div class="buttons">
              <el-button
              v-if="isAuth('expenseSearch')"
                type="primary"
                style=""
                @click="handleSelectLists"
                >搜索</el-button> 
              <el-button v-if="isAuth('expenseReset')" @click="resetTheSearch">重置</el-button>
              <el-button @click="exportFiles" class="butt" style="margin-left:40px" v-if="total>0" type="primary">批量导出</el-button>
            </div>
            <div style="margin-top: 10px;">
              <el-table
                :data="list"
                ref="multipleTable"
                 :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
                stripe
                border
                :row-style="{ height: '0px' }"
                :cell-style="{ padding: '0px' }"
                style="margin-top: 24px !important;">
                <!-- <el-table-column type="selection" width="55"></el-table-column> -->
                <el-table-column prop="orderCode" show-overflow-tooltip  min-width="180" label="流水订单号"></el-table-column>
                
                
                <el-table-column show-overflow-tooltip min-width="150"  label="归属OEM">
                  <template slot-scope="scope">
                    <span>{{ scope.row.oemName }}</span>
                  </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip min-width="150"  label="归属机构">
                  <template slot-scope="scope">
                    <span>{{ scope.row.toOfficeName }}</span>
                  </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip min-width="180" label="机构ID">
                  <template slot-scope="scope">
                    <span>{{ scope.row.officeUid }}</span>
                  </template>
                </el-table-column>
               
                <el-table-column show-overflow-tooltip min-width="150"  label="机构名称">
                  <template slot-scope="scope">
                    <span>{{ scope.row.officeName }}</span>
                  </template>
                </el-table-column>
               
                 <el-table-column show-overflow-tooltip min-width="80" label="机构类型">
                  <template slot-scope="scope">
                    <span>{{
                      (scope.row.officeType == 1 && "普通代理") ||
                        (scope.row.officeType == 0 && "OEM") ||
                        (scope.row.officeType == 2 && "admin")||
                        (scope.row.officeType == 3 && "渠道机构")

                    }}</span>
                  </template>
                </el-table-column>
                <!--<el-table-column :span="8"  label="订单号">-->
                <!--<template slot-scope="scope">-->
                <!--<span>{{scope.row.orderCode}}</span>-->
                <!--</template>-->
                <!--</el-table-column>-->
                <el-table-column show-overflow-tooltip min-width="150"  label="操作类型">
                  <template slot-scope="scope">
                    <span>{{
                      scope.row.operType == 1
                        ? "交易分润"
                        : scope.row.operType == 2
                        ? "购买机具分润"
                        : scope.row.operType == 3
                        ? "下级购买权益分润"
                        : scope.row.operType == 4
                        ? "开通活动奖励"
                        : scope.row.operType == 5
                        ? "达标活动奖励"
                        : scope.row.operType == 6
                        ? "分润入账"
                        : scope.row.operType == 7
                        ? "账户解冻"
                        : scope.row.operType == 8
                        ? "账户冻结"
                        : scope.row.operType == 9
                        ? "差错增加"
                        : scope.row.operType == 10
                        ? "充值"
                        : scope.row.operType == 99
                        ? "账户提现"
                        : scope.row.operType == 15
                        ? "余额购买商品"
                        :scope.row.operType == 14
                        ?"余额购买权益"
                        : scope.row.operType == 16
                        ? "提现失败"
                        : scope.row.operType == 17
                        ? "代理账户提现"
                        :scope.row.operType == 18
                        ?"代理提现失败"
                        : "差错减少"
                    }}</span>
                  </template>
                </el-table-column>
                 <el-table-column show-overflow-tooltip min-width="160"  label="订单日期">
                  <template slot-scope="scope">
                    <span>{{ scope.row.createDate }}</span>
                  </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip min-width="120"  label="订单金额(元)">
                  <template slot-scope="scope">
                    <span>{{ scope.row.actualAmt }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="balAmt" show-overflow-tooltip min-width="120" label="账户余额(元)"></el-table-column>
                <!--<el-table-column :span="8"  label="入账状态">-->
                <!--<template slot-scope="scope">-->
                <!--<span>{{scope.row.status}}</span>-->
                <!--</template>-->
                <!--</el-table-column>-->
                <el-table-column prop="remarks" show-overflow-tooltip min-width="120" label="备注"></el-table-column>
                

              </el-table>
              <div style="font-size: 16px;margin-top: 30px">
                <div
                  class="filter-container"
                  style="float: left; text-align: left; font-size: 16px; color: rgb(31, 165, 243); cursor: pointer; "
                >
                </div>
                
                <div
                  v-show="!listLoading"
                  class="pagination-container"
                >
                  <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.page"
                    :page-sizes="[ 20, 50, 100]"
                    :page-size="listQuery.number"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                  ></el-pagination>
                </div>
              </div>
            </div></div>
          </div>
          <el-dialog
            :close-on-click-modal="false"
            :title="dialogFormTitle"
            :visible.sync="dialogFormWindows"
          >
            <el-form
              :model="form"
              :rules="rules"
              ref="form"
              label-width="150px"
            >
              <el-row>
                <el-Col :span="12">
                  <el-form-item label="机构名称" prop="channelName">
                    <el-input
                      v-model="form.channelName"
                      disabled
                      placeholder="暂无机构名称"
                    ></el-input>
                  </el-form-item>
                </el-Col>
                <el-Col :span="12">
                  <el-form-item label="账户总额" prop="channelType">
                    <el-input
                      v-model="form.channelType"
                      disabled
                      placeholder="暂无账户总额"
                    ></el-input>
                  </el-form-item>
                </el-Col>
              </el-row>
              <el-row>
                <el-Col :span="12">
                  <el-form-item label="可用余额" prop="channelType">
                    <el-input
                      v-model="form.channelType"
                      disabled
                      placeholder="暂无可用余额"
                    ></el-input>
                  </el-form-item>
                </el-Col>
              </el-row>

              <el-row>
                <el-Col :span="12">
                  <el-form-item label="差错类别" prop="channelName">
                    <el-input
                      v-model="form.channelName"
                      placeholder="暂无机构名称"
                    ></el-input>
                  </el-form-item>
                </el-Col>
                <el-Col :span="12">
                  <el-form-item label="差错金额" prop="channelType">
                    <el-input
                      v-model="form.channelType"
                      placeholder="暂无账户总额"
                    ></el-input>
                  </el-form-item>
                </el-Col>
              </el-row>
              <el-row>
                <el-Col :span="12">
                  <el-form-item label="备注说明" prop="channelType">
                    <el-input
                      v-model="form.channelType"
                      placeholder="暂无可用余额"
                    ></el-input>
                  </el-form-item>
                </el-Col>
              </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormWindows = false">取 消</el-button>
              <el-button type="primary" @click="create('form')"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </el-main>
      </el-container>
    </el-container>
    <Tree :showType="showType" @func="transmit" />
  </div>
</template>

<script>
import Tree from "../tree/index";
import https from "../../plugins/https.js"
// 批量导出
import { exportFile } from "../../plugins/expord"
export default {
  name: "shareTheTemplate",
  data() {
    return {
      orgUid:"",
      showType: false,
      list: null,
      total: null,
      listLoading: false,
      checkedAll: false,
      officeName: "",
      jurisdiction:"",
      listQuery: {
        oemUid:
          localStorage.getItem("jurisdiction") != 2
            ? localStorage.getItem("uid")
            : undefined, //OEMid          officeUid: undefined,//	机构ID
        officeName: undefined, //	机构名称
        officeType: "", //	机构类型
        officeUid: undefined,
        orderCode: undefined, //	订单号
        operType: "", //	操作类型
        startDate: undefined, //	开始时间
        endDate: undefined, //	结束时间
        page: 1, //第几页
        number: 20 //每页几条
      },
      form: {},
      selectTime: [],
      // urltype: this.GLOBAL.httpurl, //请求地址
      multipleSelection: [], //选中的数组
      operType: [
        { label: "全部", id: ""},
        { label: "交易分润", id: "1" },
        { label: "购买机具分润", id: "2" },
        { label: "下级购买权益分润", id: "3" },
        { label: "开通活动奖励", id: "4" },
        { label: "达标活动奖励", id: "5" },
        { label: "分润入账", id: "6" },
        { label: "账户提现", id: "99" },
        { label: "账户解冻", id: "7" },
        { label: "账户冻结", id: "8" },
        { label: "差错增加", id: "9" },
        { label: "充值", id: "10" },
        { label: "差错减少", id: "0" },
        { label: "余额购买商品", id: "15" },
        { label: "提现失败", id: "16" },
        { label: "代理账户提现", id: "17" },
        { label: "代理提现失败", id: "18" },
        // { label: "余额购买权益", id: "14" }
      ],
      officeType: [
        { label: "全部", id: "" },
        { label: "OEM", id: "0" },
        { label: "普通代理", id: "1" },
        {label:"渠道机构",id:'3'}
      ],
      sign: localStorage.getItem("jurisdiction") == 2, //最高权限看到的true
      dialogFormTitle: "",
      dialogFormWindows: false,
      rules: {}
    };
  },
  components: {
    Tree
  },
  created() {
    this.jurisdiction = localStorage.getItem("jurisdiction")
    let that = this;
    that.handleSelectList();
  },

  methods: {
    //这里开始
    transmit(data) {
      console.log(data.uid);
      //归属机构的uid
      this.listQuery.officeUid = data.uid;
      //归属机构名字
      this.officeName = data.name;
    },
    //设置取消的
    determine() {
      // alert("执行")
      this.showType = false;
    },

    selectInstitution() {
      this.showType = true;
    },
    //这里结束

    /**
     * @Author： Zhu Liang Fu
     * @Date：2020/7/15
     * @annotation: 全选
     **/
    selAll() {
      if (this.checkedAll) {
        this.list.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 16:41
     * @annotation： 界面集合获取数据
     **/
    handleSelectList() {
      let that = this;
      that.listLoading = true;
        https.transactionsList(that.listQuery).then(res => {
          if (res.data.code == "0000") {
            that.list = res.data.data;
            that.total = res.data.total;
            that.listLoading = false;
          } else {
            that.listLoading = false;
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time:  2, //1秒后自动关闭
            });
          }
        });
    },
    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 17:57
     * @annotation： 分页
     **/
    handleSizeChange(val) {
      let that = this;
      that.listQuery.number = val;
      that.listQuery.page = 1;
      that.handleSelectList();
    },
    handleSelectLists() {
      let that = this;
      that.listQuery.page = 1;
      that.handleSelectList();
    },
    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 17:57
     * @annotation： 分页
     **/
    handleCurrentChange(val) {
      let that = this;
      that.listQuery.page = val;
      that.handleSelectList();
    },

    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 16:41
     * @annotation：  时间格式化
     **/
    timeData(e) {
      let that = this;
      if (e) {
        that.listQuery.startDate = e[0];
        that.listQuery.endDate = e[1];
      } else {
        that.listQuery.startDate = undefined;
        that.listQuery.endDate = undefined;
      }
    },

    /**
     * @author: Zhu Liangfu
     * @Description: 导出模板
     * @date:2020/6/11   20:44
     */
    exportFiles() {
      let that = this;
      exportFile("/api/account/transactionsList/excel/export",that.listQuery,"流水明细")
      // that
      //   .axios({
      //     method: "POST",
      //     url: "api/account/transactionsList/excel/export",
      //     headers: { "Content-Type": "application/json;charset=utf-8" },
      //     data: that.listQuery,
      //     responseType: "arraybuffer"
      //   })
      //   .then(res => {
      //     let blob = new Blob([res.data], {
      //       type: "application/vnd.ms-excel;charset=utf-8"
      //     });
      //     var link = document.createElement("a");
      //     link.href = window.URL.createObjectURL(blob);
      //     let date = new Date();
      //     link.download =
      //       "流水明细列表" +
      //       date.getFullYear() +
      //       (date.getMonth() < 10 ? "0" + date.getMonth() : date.getMonth()) +
      //       (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) +
      //       (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
      //       (date.getMinutes() < 10
      //         ? "0" + date.getMinutes()
      //         : date.getMinutes()) +
      //       (date.getSeconds() < 10
      //         ? "0" + date.getSeconds()
      //         : date.getSeconds());
      //     link.click();
      //   })
      //   .catch(e => {
      //   });
    },

    /**
     * @Author： Zhu Liang Fu
     * @Date： 2020/6/10 17:50
     * @annotation： 重置查询条件
     **/
    resetTheSearch() {
      let that = this;
      this.officeName = "";
      that.listQuery = {
        
        oemUid:
          localStorage.getItem("jurisdiction") != 2
            ? localStorage.getItem("uid")
            : undefined, //OEMid          officeUid: undefined,//	机构ID
        officeName: undefined, //	机构名称
        officeType: "", //	机构类型
        orderCode: undefined, //	订单号
        operType: "", //	操作类型
        officeUid:"",
        startDate: undefined, //	开始时间
        endDate: undefined, //	结束时间
        orgUid:"",
        page: 1, //第几页
        number: 20 //每页几条
      };
      that.selectTime = [];
      that.handleSelectList();
    }
  }
};
</script>

<style scoped>
.con {
  position: relative;
}
/* 单独样式 */
.contbox6_10 {
   width: 100%;
  /*  height: 87.5vh; */
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.sousuojg6_10 {
  width: 100%;
  
}
/* .titlelist6_10 {
  width: 100%;
  float: left;
  font-size: 16px;
  color: #222;
  margin-top: 40px;
}

.sousuojg6_10 {
  width: 100%;
  float: left;
  font-size: 16px;
  color: #222;
  padding: 30px 10px;
  /* padding-bottom: 0; 
  box-sizing: border-box;
  background-color: #f6f6f6;
  margin-top: 20px;
  border-radius: 5px;
} /*

.fileList {
  display: inline-block;
  border-style: solid dotted dashed double;
  padding: 8px 8px 8px 8px;
  text-align: center;
}
.times {
  width: 20px;
  display: inline-block;
  text-align: center;
}
.boxer {
  /* padding-right: 10px; */
  /* float: right; */

.buttons > .el-button {
  height: 32px;
  width: 100px;
  float: left;
}
</style>
